<template>
  <div>
    <van-nav-bar :title="t('shiftoutTheWarehouse.shiftoutByLocation')" left-arrow @click-left="onClickLeft" placeholder fixed/>

    <van-form style="margin-top: 15vh">
      <scanning @keydownEnter="handleScan" @input="handleManualInputOriginalLocation" ref="originalLocation" :placeholder="t('shiftoutTheWarehouse.originalLocation')" :isFocus="true"
                style="margin-bottom: 20px; height: 50px;"></scanning>
      <scanning @keydownEnter="handleScanNewLocation" @input="handleManualInputNewLocation" ref="newLocation" :placeholder="t('shiftoutTheWarehouse.newLocation')"
                style="height: 50px"></scanning>
      <div style="margin: 20px 7px; display: flex; justify-content: space-between;">
        <van-button block @click="reset">{{t('reset')}}</van-button>
        <van-button block type="primary" @click="submit" style="margin-left: 5px;">{{t('submit')}}</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import Scanning from "@/views/components/Scanning/index.vue";
import { useI18n } from "vue-i18n";
import { postRequest, scanSuccess, scanFail } from "@/api";
import { AppToast } from "@/utils/appToast";

const { t } = useI18n();

let originalLocationCode = ref('');
let newLocationCode = ref('');
const onClickLeft = () => history.back();
const handleScan = async code => {
  await postRequest(
      '/orderInfo/checkLocationExist',
      { locationCode: code }
  ).then(() => {
    scanSuccess()
    originalLocationCode.value = code;
  }, () => {
    scanFail()
    originalLocationCode.value = code;
  })
};
const handleScanNewLocation = code => {
  postRequest(
      '/orderInfo/checkLocationExist',
      { locationCode: code }
  ).then(() => {
    scanSuccess()
    newLocationCode.value = code;
  }, () => {
    scanFail()
    newLocationCode.value = code;
  })
};
const originalLocation = ref(null);
const newLocation = ref(null);
const reset = () => {
  originalLocation.value.setValue();
  newLocation.value.setValue();
};
const handleManualInputOriginalLocation = (event: Event) => {
  const inputElement = event.target as HTMLInputElement;
  const value = inputElement.value;
  // 可根据实际需求添加格式处理，这里仅去除首尾空格作为示例
  const formattedValue = value.trim();
  // 将手动输入并处理后的的值赋给originalLocationCode
  originalLocationCode.value = formattedValue;
};
const handleManualInputNewLocation = (event: Event) => {
  const inputElement = event.target as HTMLInputElement;
  const value = inputElement.value;
  // 可根据实际需求添加格式处理，这里仅去除首尾空格作为示例
  const formattedValue = value.trim();
  // 将手动输入并处理后的的值赋给newLocationCode
  newLocationCode.value = formattedValue;
};
const submit = () => {
  if (true) {
    postRequest("/orderInfo/movingLocation", {
      containerCode: '',
      dimension: 'location',
      fromTerminal: '1',
      locationCode: originalLocationCode.value,
      locationCodeNew: newLocationCode.value,
      modifiedUser: '',
    }).then(res => {
      console.log(res);
      AppToast(t("movingLocationSuccess"), "success");
      reset()
    })
  }
};

</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

:deep(.van-cell__label) {
  font-size: 1rem;
}
</style>